<template>
	<el-row>
		<el-col :span="4">
			<div style="text-align: center;">
				<img src="../assets/image/logo.png" class="bottph1" />
			</div>
			<el-menu>
				<template v-for="menu in menuList">
					<el-sub-menu v-if="menu.childs" :index="menu.menuId+''">
						<template #title>
							<div class="block">
								<p :class="getnavs(menu.menuName)"></p>
								<router-link :to="menu.path">{{menu.menuName}}</router-link>
							</div>
							
						</template> 
						<el-menu-item v-for="menu2 in menu.childs" :index="menu2.menuId+''">
							<router-link  :to="menu2.path">{{menu2.menuName}}</router-link>
						</el-menu-item>
					</el-sub-menu>
					<el-menu-item v-else :index="menu.menuId+''">
						<div class="block">
							<p :class="getnavs(menu.menuName)"></p>
							<router-link :to="menu.path">{{menu.menuName}}</router-link>
						</div>
					</el-menu-item>
				</template>
			</el-menu>
			
<!-- 			<el-menu class="Fmenu">
				<el-menu-item v-for="firstMenu in menuList" :index="firstMenu.menuId+''">
					<router-link :to="firstMenu.menuPath">{{firstMenu.menuName}}</router-link>
				</el-menu-item>
			</el-menu> -->
			<div style="text-align: center;">
				<img src="../assets/image/illustration.png" class="bottph" />
			</div>
			
		</el-col>
		<el-col :span="20">
			<el-container>
			    <el-header style="background-color: white;display: flex;align-items: center;justify-content: flex-end;">
					<img src="../assets/image/tx.png" class="headerph" />
					<h5 style="margin: 0px 20px;">{{roleName}}</h5>
					<h5 @click="exit" style="margin-right: 20px;cursor: pointer;">退出</h5>
				</el-header>
			    <el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
			
		</el-col>
	</el-row>
	<el-dialog
	    v-model="dialogVisible"
	    title="提示"
	    width="300"
	  >
	    <div style="text-align: center;">
			确定要退出吗？
		</div>
	
		
	   <template #footer>
	     <div style="text-align: center;margin-top: 15px;">
			<el-button type="info" @click="exitsure" style="width: 70px; background-color: #106ab1;color: white;">确定</el-button>
	       <el-button @click="dialogVisible = false" style="width: 70px;" type="info">取消</el-button>
	      </div>
	    </template>
	  </el-dialog>
</template>

<script setup>
	 import { ElRow,ElCol,ElMenu,ElMenuItem } from 'element-plus';
	 import { onMounted, ref } from 'vue';
	 import { FindMenu } from '@/api/wym';
	import { useRouter } from 'vue-router';
	 const router=useRouter()
	 let dialogVisible=ref(false)
	 let menuList=ref([])
	 let roleName=ref('')
	 const exit=()=>{
		 dialogVisible.value=true
		 // router.push('/login')
	 }
	 const getnavs=(menuName)=>{
	 	switch(menuName){
	 		case "首 页":return 'home';break;
	 		case "用户管理":return 'user';break;
	 		case "菜单管理":return 'menu';break;
	 		case "管理审批":return 'approval';break;
	 		case "课程管理":return 'lessonmanager';break;
	 		case "管理请假":return 'leave';break;
	 		case "班级管理":return 'classmanager';break;
	 		case "教师管理":return 'teachermanager';break;
	 		case "学生管理":return 'studentmanager';break;
	 	}
	}
	 
	 const exitsure=()=>{
		  dialogVisible.value=false
		  router.push('/login')
	 }
	 
	onMounted(async ()=>{
		let menuRes=await FindMenu({
			roleIds:JSON.parse(sessionStorage.getItem('rolesIdarr'))
		})
		// console.log('messssssss',menuRes)
		let list = []
		menuRes.forEach(v=>{
			// console.log("path",v.path)
			if(v.path.slice(0,5)!="/hide"){
				if(v.path == "/homepage"){
					list.unshift(v)
				}else{
					list.push(v)
				}
				
			}
			
		})
		menuList.value=list
		roleName.value=sessionStorage.getItem('userName') ? sessionStorage.getItem('userName') : "暂无"
	})
	
</script>

<style lang="less" scoped >
	*{
		margin:0;
		padding: 0;
	}
	.el-header{
	        height:10.5vh
	    }
	.el-main{
		height: 89.5vh;
		background-color: #f3f8fd;
		padding: 20px !important;
		box-sizing: border-box;
	}
	
	.headerph{
		width: 35px;
	}
	
	.bottph{
		width:68%;
		object-fit: cover;
		margin: 0 auto;
	}
	.bottph1{
		width:80%;
		object-fit: cover;
		margin: 0 auto;
	}
	
	.el-menu{
		background: white;
	}
	.el-menu-item {
		display: block;
		background-color: white;
		padding: 0px !important;
		text-align: center;
	}
	.block{
			width:100px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			// justify-content: center;
	}
	
	.el-menu-item:has(.home) .home{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/HomePageOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.home) .home{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/HomePageOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	
	.el-sub-menu:has(.user) .user{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/USEROff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-sub-menu:has(a.router-link-active):has(.user) .user{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/USEROn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	
	.el-menu-item:has(.user) .user{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/USEROff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.user) .user{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/USEROn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	
	
	.el-menu-item:has(.menu) .menu{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/MenuOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.menu) .menu{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/MenuOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(.classmanager) .classmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/ClassOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.classmanager) .classmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/ClassOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(.studentmanager) .studentmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/StudentOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.studentmanager) .studentmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/StudentOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(.teachermanager) .teachermanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/TeacherOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.teachermanager) .teachermanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/TeacherOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-sub-menu:has(.lessonmanager) .lessonmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/kechengOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-sub-menu:has(a.router-link-active):has(.lessonmanager) .lessonmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/kechengOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	
	.el-menu-item:has(.lessonmanager) .lessonmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/kechengOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.lessonmanager) .lessonmanager{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/kechengOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	
	.el-menu-item:has(.leave) .leave{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/qingjiaOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.leave) .leave{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/qingjiaOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	p{
		margin-right:10px ;
	}
	.el-menu-item:has(.approval) .approval{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/shenpiOff.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-menu-item:has(a.router-link-active):has(.approval) .approval{
		display: inline-block;
		background-color: yellow;
		background: url(../assets/image/shenpiOn.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
	}
	.el-sub-menu:has(a.router-link-active):has(p) .el-sub-menu__title a{
		color: #3695ff !important;
	}
	:deep(.el-sub-menu__title){
		display: block !important;
		padding: 0px !important;
		text-align: center;
	}
	:deep(.el-sub-menu__title:hover) {
	  background-color: white;
	}
	.el-sub-menu .el-menu-item{
		padding: 0px !important;
		display: block;
		text-align: center;
	}
	a:has(a.router-link-active){
		// background-color: #19c0a4;
		color: #3695ff;
	}
	.el-sub-menu__title:has(a.router-link-active){
			color: #3695ff;
	}
	.el-sub-menu__title{
			color: #3695ff;
	}
	a.router-link-active{
		color: #3695ff;
	}
	a{
		color: #484848;
		text-decoration: none;
	}
	a:has(.router-link-active){
		color: royalblue;
	}
	:deep(.el-sub-menu__title){
		height: 50px !important;
		line-height: 50px;
	} 
	// :deep(.el-menu-item:hover) {
	//   background-color: #19c0a4 !important;
	// }
	
	
</style>
